<template>
  <div>
    <el-row id="artList" type="flex" justify="space-around">
    <el-col>
      <el-row class="art-item" v-for="(blog, key) in Blogs" :key="key">
        <el-card shadow="hover">
          <h5><router-link :to="'/article/'+blog.id" tag="span" class="art-title">{{blog.title}}</router-link></h5>
          <el-row style="display: flex" class="art-info d-flex align-items-center justify-content-start">
            <div class="art-time"><i class="el-icon-time"></i>：{{blog.createTime}}</div>
            <div class="art-classification"><i class="el-icon-s-flag"></i>：{{blog.typeName}}</div>
            <div class="art-source"><el-tag size="small" type="">原创</el-tag></div>
          </el-row>
          <el-row class="art-body">
            <div class="side-img hidden-sm-and-down"><img class="art-banner" :src="'http://47.106.168.239:8098/api/getImage/'+blog.id"></div>
            <div class="side-abstract">
              <div class="art-abstract">
                  {{blog.description}}
              </div>
              <div class="art-more">
                <el-button plain @click="readAll(blog.id)">阅读全文</el-button>
                <div class="like" style="margin-right: -300px">
                  <img style="margin-right: 5px" width="15px" height="15px" src="../../assets/like.png">{{blog.likes}}
                </div>
                <div class="view"><i class="el-icon-view"></i>{{blog.views}}</div>
               </div>
            </div>
          </el-row>
        </el-card>
      </el-row>
    </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    Blogs: {},
    type: String
  },
  methods: {
    readAll (BlogId) {
     this.$router.push({ path: `/article/${BlogId}` })
    }
  }
}
</script>

<style lang="less" scoped>
#side .item {margin-bottom: 30px;}
.art-item {
  margin-bottom: 30px;
  margin-right: 200px;
  margin-left: 16.6%;
  position: relative;
  width: 100%;
}
img.tag {
width: 16px;
height: 16px;
}
.art-title {
border-left: 3px solid #F56C6C;
padding-left: 5px;
cursor: pointer;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-right: 20px;
}
art-classification{
  margin-right: 20px;
}
.art-source{
  margin-left: 20px;
  height: 10px;
}
.art-body {
display: flex;
padding: 10px 0;
}
.side-img {
height: 150px;
width: 270px;
overflow: hidden;
margin-right: 10px;
}

img.art-banner {
width: 100%;
height: 100%;
transition: all 0.6s;
}
img.art-banner:hover {
transform: scale(1.4);
}

.side-abstract {
flex: 1;
display: flex;
flex-direction: column;
}
.art-abstract {
flex: 1;
color: #aaa;
}
.art-more {
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.art-more .view {
color: #aaa;
}
.art-more .like {
color: #aaa;
}
h5{
font-size: 18px;
}
.pagination {
background-color: #F9F9F9;
}
</style>
